<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .body{
            position:relative;
        }
        .product{
            position:relative;
            margin:5px 0 0 90px;
            height:450px;
            width:450px;
            border:1px solid rgb(0,0,0,.4);
        }
        .mask{
            display:none;
            position:absolute;
            top:0;
            left:0;
            width:200px;
            height:200px;
            background-color:rgb(255, 255, 0,.4);
        }
        .view-finder{
            width:400px;
            height:400px;
            display:none;
            border:1px solid rgb(0,0,0,.4);
            position:absolute;
            left:542px;
            top:5px;
            overflow:hidden;
        }
        .active{
            display:block;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/m30.jpg" width="450" height="450" alt="m30">
        <div class="mask"></div>
    </div>
    <div class="view-finder">
        <img src="./images/m30-big.jpg" alt="m30">
    </div>

    <script src="./common.js"></script>
    <script>
        var oProduct=$('.product');
        var oMask=$('.mask');
        var oView=$('.view-finder');
        var oViewPic=$('.view-finder>img')

        oProduct.addEventListener('mouseenter',function(){
            oMask.classList.add('active');
            oView.classList.add('active');
        }); //移入
        oProduct.addEventListener('mouseleave',function(){
            oMask.classList.remove('active');
            oView.classList.remove('active');
        }); //移出
        oProduct.addEventListener('mousemove',function(e){
            var x=e.clientX-oMask.offsetWidth/2-getPosition(oProduct).left;
            var y=e.clientY-oMask.offsetHeight/2-getPosition(oProduct).top;
            x=Math.min(x,oProduct.offsetWidth-oMask.offsetWidth);
            x=Math.max(x,0);

            y=Math.min(y,oProduct.offsetHeight-oMask.offsetHeight);
            y=Math.max(y,0);

            oMask.style.left=x+'px';
            oMask.style.top=y+'px'


            var moveX=(oViewPic.offsetWidth-oView.offsetWidth)/(oProduct.offsetWidth-oMask.offsetWidth);
            var moveY=(oViewPic.offsetHeight-oView.offsetHeight)/(oProduct.offsetHeight-oMask.offsetHeight);
            // console.log(moveX,moveY)

            oViewPic.style.marginLeft=-x*moveX+'px';
            oViewPic.style.marginTop=-y*moveY+'px';
            // console.log(oViewPic.style.left,oViewPic.style.left)
        }); //移动
    </script>
</body>
</html>